<template>
  <div class="curriculums">
    <div class="head cf">
      <div class="text" :class="{active:currIndex===0}" @click="currIndex=0">今日课表</div>
      <div class="text" :class="{active:currIndex===1}" @click="currIndex=1">明日课表</div>
    </div>
    <div class="c-cs">
      <!-- <div class="c-tt">今日课表</div> -->
      <ul class="list cf">
        <li class="item" v-for="(item, i) in culums" :key="'today'+i">{{item}}</li>
      </ul>
    </div>
    <!-- <div class="tomorrow c-cs">
      <div class="c-tt">明日课表</div>
      <ul class="list cf">
        <li class="item" v-for="(item, i) in tomorrow" :key="'tomorrow'+i">{{item}}</li>
      </ul>
    </div> -->
  </div>
</template>

<script>
// import FontZoom from '@/modules/font-zoom/FontZoom'
export default {
  name: 'curriculums',
  props: {
    curriculums: {
      type: Object,
      default () { return {} }
    }
  },
  data () {
    return {
      currIndex: 0,
      showType: 0
    }
  },
  computed: {
    today () {
      return this.strToArr(this.curriculums.today)
    },
    tomorrow () {
      return this.strToArr(this.curriculums.tomorrow)
    },
    culums () {
      let { currIndex, today, tomorrow } = this
      return currIndex === 0 ? today : tomorrow
    }
  },
  created () {
    setInterval(() => {
      this.currIndex = -(this.currIndex - 1)
    }, 10 * 1000)
  },
  methods: {
    strToArr (str) {
      if (str) return str.replace(/\s*^,/, '').split(',')
      return []
    }
  }
}
</script>

<style scoped>
.curriculums {
  /*课程表*/
  overflow: hidden;
  width: 590px;
  height: 220px;
  float: left;
  font-size: 24px;
  color: #333;
  padding-left: 62px;
}
.head {
  width: 220px;
  border: 1px solid #ccc;
  border-radius: 8px;
  overflow: hidden;
}
.head > .text {
  text-align: center;
  width: 50%;
  float: left;
  color: #999;
  box-sizing: border-box;
}
.head > .text.active {
  background: #41cbec;
  color: #fff;
}
.head > .text:first-child {
  border-right: 1px solid #ccc;
}
.c-cs {
  display: block;
  /* width: 150px; */
  /* float: left; */
}

.c-cs ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.c-cs li {
  text-align: center;
  line-height: 35px;
  color: #666;
}

.c-cs .c-tt {
  color: #41cbec;
  line-height: 50px;
  font-size: 26px;
  /* text-align: center; */
}

.tomorrow .c-tt {
  color: #9de4b8;
  font-size: 26px;
}
.c-cs .list {
  /* margin-left: -21px; */
}
.list .item {
  float: left;
  margin: 10px 10px 0;
  line-height: 38px;
}
</style>
